<template>
    <div>
        <div class=" anlibox ispcbigs" :class="[!ismobile ? 'scrollpc' : 'scrollm', fan ? 'fan' : '']">
            <div class="anli">
                <div class="anli_list" v-for="(item, index) in swiperlist">
                    <img class="img" :src="item.logo" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>


import 'swiper/css/swiper.min.css'
export default {
    name: 'HelloWorld',
    components: {
    },
    data() {
        return {
            ismobile: false,

        }
    },
    props: {
        swiperlist: {
            default: []
        },
        fan: {
            default: false
        }
    },
    mounted() {

        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });
    }
}
</script>
<style lang="scss" scoped>
.anlibox {
    width: 100%;

    .anli {
        overflow: hidden;
        display: inline-flex;
        gap: var(--lp-pad-3);
        will-change: transform;
    }

    .anli_list {
        float: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
        transition: color 0.20s, border-color 0.20s,
            background-color 0.20s, background-image 0.20s;
        transition-timing-function: linear;


    }
}

.scrollpc {
    .anli_list {
        min-width: 10rem;
        max-width: 609px;
        width: 30rem;
        height: 275px;
        float: none;
    }

    width: 100%;

    .anli {
        animation: lp-scrolling 60s linear infinite;
    }

}


.img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.scrollm {
    .anli_list {
        background: none !important;
        width: 3rem !important;
        height: 8rem !important;
        padding: 0 !important;
        min-width: 10rem;
    }

    .anli {
        animation: lp-scrollings 60s linear infinite;
    }
}

.fan {
    .anli {
        animation-direction: reverse;
    }
}



@keyframes lp-scrolling {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-2700px)
    }
}


@keyframes lp-scrollings {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-600px)
    }
}

.anli:hover {
    animation-play-state: paused
}
</style>